<template>
  <div class="kk-copy" @mouseup="handleMouseUp1">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    disabled: {
      handler(nv, ov) {
        console.log(nv, ov, "nv", "ov");
      },
    },
  },
  data() {
    return {
      selection: null,
      range: null,
    };
  },

  methods: {
    async handleMouseUp1() {
      console.log("内部触发");
      await this.$nextTick();
      //有选区的时候才生效 , 由父元素控制
      if (this.disabled) {
        return;
      }
      this.selection = window.getSelection();
      //获取选区
      this.range = this.selection.getRangeAt(0);
      this.getTextNodesReplace(this.range);
    },
    // 获取选中的文本节点 然后替换掉
    getTextNodesReplace(range) {
      //没有选区
      if (range.collapsed) {
        this.reset();
        return;
      }
      try {
        console.log(range.endContainer, range.endOffset);
        //把文本节点进行分割
        range.endContainer.splitText(range.endOffset);
        range.startContainer.splitText(range.startOffset);
        let nodes = [];
        console.log(range.commonAncestorContainer);
        range.commonAncestorContainer.childNodes.forEach((item) => {
          this.deepNode(item, nodes);
        });
        console.log(nodes, "nodes");
        let spans = [];
        nodes.forEach((item) => {
          let span = document.createElement("span");
          span.innerHTML = item.textContent;
          span.classList.add("line");
          spans.push(span);
          item.parentNode.replaceChild(span, item);
        });
        let newRange = document.createRange();
        spans[0].classList.add("relative");
        newRange.setStartBefore(spans[0]);
        newRange.setEndAfter(spans[spans.length - 1]);
        this.selection.removeAllRanges();
        //选区展示
        this.selection.addRange(newRange);
        let range1 = document.createRange();
        range1.selectNode(spans[0]);
        let rect = range1.getBoundingClientRect();
        let parentRect = this.$el.getBoundingClientRect();
        let rectEnd = {
          left: spans[0].offsetLeft,
          top: rect.top - parentRect.top - 20,
        };
        this.createTooltip(rectEnd);
      } catch (err) {
        console.log(err, "err");
        this.reset();
      }
    },
    deepNode(node, nodes) {
      //文本节点的话 就保存
      if (node.nodeType == 3) {
        if (this.selection.containsNode(node)) {
          nodes.push(node);
        }
      } else {
        //非文本节点就继续递归
        node.childNodes.forEach((item) => {
          this.deepNode(item, nodes);
        });
      }
    },
    reset() {
      let doms = this.$el.childNodes;
      //写循环是为了 item.innerHTML  = item.innerHTML; 不丢失dom原来的事件
      doms.forEach((item) => {
        let lineArr = item.querySelectorAll(".line");
        if (item.querySelector(".tooltip")) {
          item.querySelector(".tooltip").remove();
        }
        //都是文本内容
        lineArr.forEach((item) => {
          let textNode = document.createTextNode(item.innerText);
          item.parentNode.replaceChild(textNode, item);
        });
        item.innerHTML  = item.innerHTML;
      });
    },
    createTooltip(rect) {
      let dom1 = this.$el;
      let tooltip = document.createElement("span");
      tooltip.classList.add("tooltip");
      tooltip.innerText = "123123123";
      tooltip.style.top = rect.top + "px";
      tooltip.style.left = rect.left + "px";
      dom1.firstChild.appendChild(tooltip);
      let _this = this;
      window.addEventListener("mousedown", function fn() {
        _this.reset();
        window.removeEventListener("mousedown", fn);
      });
    },
  },
};
</script>
<style scoped lang="less">
.kk-copy {
  box-sizing: border-box;
  position: relative;
}
.line {
  text-decoration: underline;
}
/deep/ .tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid red;
}
</style>
